import { SaveOutlined, PlusOutlined } from '@ant-design/icons';
import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProForm,
  ProFormText,
  ProFormItem,
  ProFormSelect,
  ProFormRadio,
  ProFormDigit,
  ProFormTreeSelect,
} from '@ant-design/pro-components';
import { Space, Button, message, Modal } from 'antd';
import { useRef, useEffect, useState } from 'react';
import { getSystemMenuTreeData, MenuInfoSaveRequest } from '@/pages/Dashboard/System/Menu/service';
import { MenuInfoSaveRequestParams } from './data';

import styles from './style.less';
const MenuFormModal = ({
  parentMenuId,
  menuFormValues,
  show,
  onCancel,
  onSuccess,
}: {
  parentMenuId: string;
  menuFormValues: any;
  show: boolean;
  onCancel?: () => void;
  onSuccess?: () => void;
}) => {
  const [loading, setLoading] = useState(false);
  const formRef = useRef<ProFormInstance>();

  const handleSubmit = (e: any) => {
    formRef.current?.validateFieldsReturnFormatValue?.().then((val) => {
      setLoading(true);
      const requestParams: MenuInfoSaveRequestParams = {
        ...val,
        id: menuFormValues?.id,
        parentId: val.parentId ? val.parentId : parentMenuId,
      };
      MenuInfoSaveRequest(requestParams).then((res) => {
        if (res.code == 200) {
          setLoading(false);
          onSuccess?.();
          onCancel?.();
        } else {
          setLoading(false);
        }
      });
    });
  };
  return (
    <Modal
      title={<Space>{Object.keys(menuFormValues).length > 0 ? '修改菜单' : '添加菜单'}</Space>}
      visible={show}
      centered
      width={'45%'}
      destroyOnClose={true}
      footer={false}
      bodyStyle={{ padding: 10 }}
      onCancel={onCancel}
    >
      <ProForm
        initialValues={menuFormValues}
        formRef={formRef}
        layout="horizontal"
        className={styles.form}
        labelCol={{
          style: {
            width: 80,
          },
        }}
        submitter={false}
      >
        <ProFormTreeSelect
          name="parentId"
          initialValue={parentMenuId}
          fieldProps={{
            defaultValue: parentMenuId,
          }}
          label="父级菜单"
          placeholder="请选择"
          allowClear
          required
          rules={[
            {
              required: true,
              message: '请选择父级菜单',
            },
          ]}
          request={async () => {
            const res = await getSystemMenuTreeData();
            return res.data;
          }}
          // tree-select args
          //   fieldProps={{
          //     showArrow: false,
          //     filterTreeNode: true,
          //     showSearch: true,
          //     dropdownMatchSelectWidth: false,
          //     labelInValue: true,
          //     autoClearSearchValue: true,
          //     multiple: true,
          //     treeNodeFilterProp: 'title',
          //     fieldNames: {
          //       label: 'title',
          //     },
          //   }}
        />
        <ProFormText
          name="name"
          label="菜单名称"
          required
          rules={[
            {
              required: true,
              message: '请输入菜单名称',
            },
          ]}
        ></ProFormText>
        <ProFormRadio.Group
          label="菜单类型"
          name="type"
          required
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
          options={[
            {
              label: '目录',
              value: 'CATALOG',
            },
            {
              label: '菜单',
              value: 'MENU',
            },
            {
              label: '按钮',
              value: 'BUTTON',
            },
            {
              label: '外链',
              value: 'EXTLINK',
            },
          ]}
        />
        <ProFormText
          name="href"
          label="路由路径"
          // required
          // rules={[
          // {
          //     required: true,
          //     message: '请输入路由路径',
          // },
          // ]}
        ></ProFormText>
        <ProFormText
          name="path"
          label="页面路径"
          fieldProps={{
            addonBefore: 'src/pages/',
            addonAfter: '.tsx',
          }}

          // required
          // rules={[
          // {
          //     required: true,
          //     message: '请输入页面路径',
          // },
          // ]}
        ></ProFormText>
        <ProFormText name="icon" label="图标"></ProFormText>
        <ProFormRadio.Group
          label="状态"
          name="isShow"
          // required
          // rules={[
          // {
          //     required: true,
          //     message: '请选择',
          // },
          // ]}
          options={[
            {
              label: '显示',
              value: '1',
            },
            {
              label: '隐藏',
              value: '0',
            },
          ]}
        />
        <ProFormDigit label="排序" name="sort" min={0} max={100} />
        <ProFormItem>
          <Button
            size="large"
            type="primary"
            loading={loading}
            onClick={handleSubmit}
            icon={<SaveOutlined />}
            style={{ marginLeft: 80 }}
          >
            确定
          </Button>
        </ProFormItem>
      </ProForm>
    </Modal>
  );
};

export default MenuFormModal;
